TwilioのProgrammable ChatとCloudinaryを組み合わせて動画を送信する

TwilioのProgrammable ChatとCloudinaryを組み合わせて動画を送信する

TwilioのProgrammable ChatとCloudinaryを組み合わせて動画を送信できるチャットを作ってみました。
Clock Icon2020.09.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前回はChatのMediaMessageを使って動画を投稿してみました。

TwilioのProgrammable Chatで動画を送信してみる

現時点では、MediaMessageはメールの添付ファイルのようなもので、ファイルをアップロード・ダウンロードできるだけの機能です。MediaMessageを使う場合の課題として、ファイルサイズの制限や、コンテンツの配信・変換など課題がありました。そこで今回は、MediaMessageの代わりにCloudinaryにファイルをアップロードして動画を送信する方法を検証してみました。

やってみる

Cloudinaryのセットアップ

  • Cloudinaryのアカウントを作成します。cloud nameを控えておきます。
  • SettingsのUploadから、Unsigned uploadingを有効化します。(今回はブラウザから直接アップロードするため、この設定を有効にします。)そして作成されたpreset nameを控えておきます。

動画の送信・表示機能を追加する

前回のサンプルプロジェクトに、動画の送信・表示機能を加えました。

diffはこちらを参照してください

※ preset name などハードコーディングしたままコミットしていますが、削除済みなのでセットアップ手順に従い取得してください。

シーケンスは以下のようになります。

  1. ブラウザで選択された動画を、Cloudinaryにアップロードします。
  2. Cloudinaryからのレスポンスにあるpublic_idを、MessageのAttributesに設定して、Programmable ChatにMessageを送信します。
  3. その後、Programmable ChatからmessageAddedイベントを受信し、MessageにあるAttributesからpublic_idを取り出し、URLを組み立てて動画を表示します。

動かしているところ。(近所でリスを発見した時の動画)

アクセス制限

Chatはプライベートなものなので、動画のURLは恒久的なものではなく一時的な方が望ましいと思います。Cloudinaryで一時的なURLを発行するためにはToken-based authenticationまたはCookie-based authentication(今回のケースだとToken-basedの方を使うと思う)という機能を使います。これらを使うにはAdvanced以上のプランが必要なので今回は試していませんが、ざっくりシーケンスで示すと以下のようになります。Secretsを扱うのでサーバ側の処理が必要となります。Amazon S3のPresignedUrlと同じような仕組みですね。

感想

TwilioのProgrammable Chatと他のサービスを組み合わせて使うことで、提供するサービスの機能を拡張できることがわかりました。

Cloudinaryの強みはやはり画像・動画の変換や配信の最適化にあります。今回のサンプルプロジェクトでもCloudinaryの変換機能を使って、チャット画面にサムネイル画像(URLの末尾を.jpgにするだけ)を表示したり、動画をリサイズしたりしています。

一方で、Cloudinaryはなかなかお高いサービスなので、そこまで高機能は必要ないという場合であれば、Amazon S3などのストレージサービスを利用するのも良さそうです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.